<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="page-title">运输车登记</text>
			<view class="header-actions">
				<text class="refresh-btn" @click="refreshList">刷新</text>
			</view>
		</view>

		<!-- 筛选条件 -->
		<view class="filter-section">
			<view class="filter-form">
				<view class="form-row">
					<view class="form-item">
						<text class="label">车牌号</text>
						<input class="input" v-model="searchForm.licensePlate" placeholder="请输入车牌号" />
					</view>
					<view class="form-item">
						<text class="label">人员姓名</text>
						<input class="input" v-model="searchForm.personName" placeholder="请输入人员姓名" />
					</view>
				</view>
				<view class="form-row">
					<view class="form-item">
						<text class="label">运输时间</text>
						<picker mode="date" :value="searchForm.startDate" @change="onStartDateChange">
							<view class="picker-view">
								<text class="picker-text">{{ searchForm.startDate || '开始日期' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
						<text class="time-separator">至</text>
						<picker mode="date" :value="searchForm.endDate" @change="onEndDateChange">
							<view class="picker-view">
								<text class="picker-text">{{ searchForm.endDate || '结束日期' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="label">状态</text>
						<picker :value="statusIndex" :range="statusList" range-key="label" @change="onStatusChange">
							<view class="picker-view">
								<text class="picker-text">{{ selectedStatus.label || '请选择状态' }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="search-buttons">
					<button class="btn btn-primary" @click="handleSearch">搜索</button>
					<button class="btn btn-secondary" @click="handleReset">重置</button>
				</view>
			</view>
		</view>

		<!-- 运输车记录列表 -->
		<scroll-view class="list-scroll" scroll-y>
			<view class="list-container">
				<view
					v-for="(item, index) in tableData"
					:key="index"
					class="record-item"
				>
					<view class="item-header">
						<view class="license-info">
							<text class="license-plate">{{ item.licensePlate }}</text>
							<text class="person-name">{{ item.personName }}</text>
						</view>
						<view class="status-badge" :class="getStatusClass(item.status)">
							<text class="status-text">{{ getStatusLabel(item.status) }}</text>
						</view>
					</view>

					<view class="item-content">
						<view class="time-info">
							<text class="label">运输时间：</text>
							<text class="value">{{ item.transportTime }}</text>
						</view>
						<view class="record-time">
							<text class="label">记录时间：</text>
							<text class="value">{{ item.recordTime }}</text>
						</view>
						<view class="location-info">
							<text class="label">位置：</text>
							<text class="value">{{ item.location }}</text>
						</view>
						<view class="remarks-info" v-if="item.remarks">
							<text class="label">备注：</text>
							<text class="value">{{ item.remarks }}</text>
						</view>
					</view>

					<view class="item-actions">
						<button class="btn btn-info" @click="viewDetail(item)">详情</button>
						<button class="btn btn-warning" @click="editRecord(item)">编辑</button>
						<button class="btn btn-danger" @click="deleteRecord(item)">删除</button>
					</view>
				</view>

				<view v-if="tableData.length === 0" class="empty-state">
					<text class="empty-text">暂无运输车记录</text>
				</view>
			</view>
		</scroll-view>

		<!-- 快速登记按钮 -->
		<view class="quick-record">
			<button class="btn btn-primary btn-large" @click="showQuickRecord">
				<text class="btn-icon">🚛</text>
				<text class="btn-text">快速登记</text>
			</button>
		</view>

		<!-- 快速登记弹窗 -->
		<view v-if="showQuickRecordDialog" class="quick-record-popup-overlay" @click="closeQuickRecordDialog">
			<view class="quick-record-popup" @click.stop>
				<view class="popup-header">
					<text class="popup-title">快速登记运输车</text>
					<text class="close-btn" @click="closeQuickRecordDialog">✕</text>
				</view>

				<view class="popup-content">
					<!-- 安全告知步骤 -->
					<view v-if="!safetyInstructionPlayed" class="safety-instruction-step">
						<view class="step-header">
							<text class="step-title">安全告知</text>
							<text class="step-indicator">步骤 1 / 2</text>
						</view>
						<view class="safety-content">
							<view class="safety-notice">
								<text class="safety-text">请收听安全告知内容，了解相关安全要求后方可进行运输车登记。</text>
							</view>
							<view class="audio-player">
								<view class="audio-controls" @click="playSafetyInstruction">
									<view class="play-btn" :class="{ 'playing': audioPlaying }">
										<text class="play-icon">{{ audioPlaying ? '⏸️' : '▶️' }}</text>
									</view>
									<view class="audio-info">
										<text class="audio-title">安全告知音频</text>
										<text class="audio-duration">{{ audioCurrentTime }} / {{ audioDuration }}</text>
									</view>
								</view>
								<view class="progress-bar">
									<view class="progress-fill" :style="{ width: audioProgress + '%' }"></view>
								</view>
							</view>
							<view class="next-step-btn">
								<button class="btn btn-primary" @click="proceedToRegistration" :disabled="!audioCompleted">
									<text>{{ audioCompleted ? '已收听完毕，继续登记' : '请先收听安全告知' }}</text>
								</button>
							</view>
						</view>
					</view>

					<!-- 登记表单步骤 -->
					<view v-else class="registration-step">
						<view class="step-header">
							<text class="step-title">车辆信息登记</text>
							<text class="step-indicator">步骤 2 / 2</text>
						</view>
						<view class="form-item">
							<text class="label">车牌号</text>
							<input class="input" v-model="quickRecordForm.licensePlate" placeholder="请输入车牌号" />
						</view>

					<view class="form-item">
						<text class="label">人员姓名</text>
						<input class="input" v-model="quickRecordForm.personName" placeholder="请输入人员姓名" />
					</view>

					<view class="form-item">
						<text class="label">运输类型</text>
						<view class="radio-group">
							<view class="radio-item" @click="quickRecordForm.transportType = 'in'">
								<view class="radio" :class="{ 'checked': quickRecordForm.transportType === 'in' }">
									<text class="radio-icon" v-if="quickRecordForm.transportType === 'in'">●</text>
								</view>
								<text class="radio-text">进入</text>
							</view>
							<view class="radio-item" @click="quickRecordForm.transportType = 'out'">
								<view class="radio" :class="{ 'checked': quickRecordForm.transportType === 'out' }">
									<text class="radio-icon" v-if="quickRecordForm.transportType === 'out'">●</text>
								</view>
								<text class="radio-text">离开</text>
							</view>
						</view>
					</view>

					<view class="form-item">
						<text class="label">备注</text>
						<textarea class="textarea" v-model="quickRecordForm.remarks" placeholder="请输入备注信息（可选）"></textarea>
					</view>
				</view>

				<view class="popup-actions">
					<button class="btn btn-secondary" @click="closeQuickRecordDialog">取消</button>
					<button class="btn btn-primary" @click="submitQuickRecord" :disabled="quickRecording">
						<text v-if="!quickRecording">登记</text>
						<text v-else>登记中...</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		export default {
		data() {
			return {
				searchForm: {
					licensePlate: '',
					personName: '',
					startDate: '',
					endDate: '',
					status: ''
				},
				statusIndex: 0,
				statusList: [
					{ value: '', label: '全部状态' },
					{ value: 'in', label: '进入' },
					{ value: 'out', label: '离开' }
				],
				tableData: [],
				quickRecordForm: {
					licensePlate: '',
					personName: '',
					transportType: 'in',
					remarks: ''
				},
				showQuickRecordDialog: false,
				quickRecording: false,
				// 安全告知相关
				safetyInstructionPlayed: false,
				audioPlaying: false,
				audioCompleted: false,
				audioCurrentTime: '00:00',
				audioDuration: '00:00',
				audioProgress: 0,
				audioContext: null
			}
		},
		computed: {
			selectedStatus() {
				return this.statusList[this.statusIndex] || {}
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			// 加载数据
			loadData() {
				// 模拟API调用
				const mockData = [
					{
						id: 1,
						licensePlate: '京A12345',
						personName: '张三',
						transportTime: '2025-01-15 08:30',
						recordTime: '2025-01-15 08:35',
						status: 'in',
						location: '厂区大门入口',
						remarks: '正常进入，载有设备材料'
					},
					{
						id: 2,
						licensePlate: '京B67890',
						personName: '李四',
						transportTime: '2025-01-15 09:15',
						recordTime: '2025-01-15 09:20',
						status: 'out',
						location: '厂区大门出口',
						remarks: '正常离开，空车'
					},
					{
						id: 3,
						licensePlate: '京C11111',
						personName: '王五',
						transportTime: '2025-01-15 10:00',
						recordTime: '2025-01-15 10:05',
						status: 'in',
						location: '厂区大门入口',
						remarks: '正常进入，载有施工工具'
					},
					{
						id: 4,
						licensePlate: '京D22222',
						personName: '赵六',
						transportTime: '2025-01-15 11:30',
						recordTime: '2025-01-15 11:35',
						status: 'in',
						location: '厂区大门入口',
						remarks: '正常进入，载有建筑材料'
					},
					{
						id: 5,
						licensePlate: '京A12345',
						personName: '张三',
						transportTime: '2025-01-15 14:20',
						recordTime: '2025-01-15 14:25',
						status: 'out',
						location: '厂区大门出口',
						remarks: '正常离开，载有废料'
					}
				]

				this.tableData = mockData
			},

			// 开始时间变化
			onStartDateChange(e) {
				this.searchForm.startDate = e.detail.value
			},

			// 结束时间变化
			onEndDateChange(e) {
				this.searchForm.endDate = e.detail.value
			},

			// 状态变化
			onStatusChange(e) {
				this.statusIndex = e.detail.value
				this.searchForm.status = this.selectedStatus.value
			},

			// 搜索
			handleSearch() {
				this.loadData()
			},

			// 重置
			handleReset() {
				this.searchForm = {
					licensePlate: '',
					personName: '',
					startDate: '',
					endDate: '',
					status: ''
				}
				this.statusIndex = 0
				this.handleSearch()
			},

			// 刷新列表
			refreshList() {
				this.loadData()
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			},

			// 查看详情
			viewDetail(item) {
				uni.showToast({
					title: '查看详情功能开发中',
					icon: 'none'
				})
			},

			// 编辑记录
			editRecord(item) {
				uni.showToast({
					title: '编辑功能开发中',
					icon: 'none'
				})
			},

			// 删除记录
			deleteRecord(item) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条运输车记录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							this.loadData()
						}
					}
				})
			},

			// 显示快速登记弹窗
			showQuickRecord() {
				this.resetSafetyInstruction()
				this.quickRecordForm = {
					licensePlate: '',
					personName: '',
					transportType: 'in',
					remarks: ''
				}
				this.showQuickRecordDialog = true
			},

			// 关闭快速登记弹窗
			closeQuickRecordDialog() {
				this.stopAudio()
				this.showQuickRecordDialog = false
			},

			// 重置安全告知状态
			resetSafetyInstruction() {
				this.safetyInstructionPlayed = false
				this.audioPlaying = false
				this.audioCompleted = false
				this.audioCurrentTime = '00:00'
				this.audioDuration = '00:00'
				this.audioProgress = 0
				if (this.audioContext) {
					this.audioContext.destroy()
					this.audioContext = null
				}
			},

			// 播放安全告知音频
			playSafetyInstruction() {
				if (!this.audioContext) {
					this.initAudioContext()
				}

				if (this.audioPlaying) {
					this.audioContext.pause()
					this.audioPlaying = false
				} else {
					this.audioContext.play()
					this.audioPlaying = true
				}
			},

			// 初始化音频上下文
			initAudioContext() {
				// 这里使用模拟音频，实际项目中需要替换为真实的音频文件URL
				this.audioContext = uni.createInnerAudioContext()

				// 模拟音频文件（实际使用时替换为真实的安全告知音频URL）
				this.audioContext.src = '/static/safety-instruction.mp3'

				this.audioContext.onPlay(() => {
					this.audioPlaying = true
				})

				this.audioContext.onPause(() => {
					this.audioPlaying = false
				})

				this.audioContext.onStop(() => {
					this.audioPlaying = false
				})

				this.audioContext.onEnded(() => {
					this.audioPlaying = false
					this.audioCompleted = true
					this.audioProgress = 100
					this.audioCurrentTime = this.audioDuration
				})

				this.audioContext.onTimeUpdate(() => {
					const currentTime = this.audioContext.currentTime
					const duration = this.audioContext.duration || 60 // 假设音频时长60秒

					this.audioCurrentTime = this.formatTime(currentTime)
					this.audioDuration = this.formatTime(duration)
					this.audioProgress = (currentTime / duration) * 100
				})

				this.audioContext.onError(() => {
					uni.showToast({
						title: '音频加载失败',
						icon: 'none'
					})
				})
			},

			// 停止音频播放
			stopAudio() {
				if (this.audioContext) {
					this.audioContext.stop()
					this.audioPlaying = false
				}
			},

			// 格式化时间显示
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60)
				const secs = Math.floor(seconds % 60)
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
			},

			// 继续到登记步骤
			proceedToRegistration() {
				if (this.audioCompleted) {
					this.safetyInstructionPlayed = true
					this.stopAudio()
				}
			},

			// 提交快速登记
			async submitQuickRecord() {
				if (!this.validateQuickRecord()) {
					return
				}

				this.quickRecording = true

				try {
					// 模拟API调用
					await new Promise(resolve => setTimeout(resolve, 1000))

					uni.showToast({
						title: '登记成功',
						icon: 'success'
					})

					this.closeQuickRecordDialog()
					this.loadData()

				} catch (error) {
					uni.showToast({
						title: '登记失败',
						icon: 'none'
					})
				} finally {
					this.quickRecording = false
				}
			},

			// 验证快速登记表单
			validateQuickRecord() {
				if (!this.quickRecordForm.licensePlate.trim()) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
					return false
				}

				if (!this.quickRecordForm.personName.trim()) {
					uni.showToast({
						title: '请输入人员姓名',
						icon: 'none'
					})
					return false
				}

				return true
			},

			// 获取状态样式类
			getStatusClass(status) {
				return `status-${status}`
			},

			// 获取状态标签
			getStatusLabel(status) {
				const labelMap = {
					in: '进入',
					out: '离开'
				}
				return labelMap[status] || status
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
	}

	.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #e4e7ed;

		.page-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.header-actions {
			.refresh-btn {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
	}

	.filter-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.filter-form {
			.form-row {
				display: flex;
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.form-item {
					flex: 1;
					margin-right: 30rpx;

					&:last-child {
						margin-right: 0;
					}

					.label {
						display: block;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 15rpx;
						font-weight: 500;
					}

					.input {
						width: 100%;
						height: 80rpx;
						border: 2rpx solid #e4e7ed;
						border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						background: #fff;
						box-sizing: border-box;
					}

					.picker-view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						border: 2rpx solid #e4e7ed;
						border-radius: 8rpx;
						padding: 0 20rpx;
						background: #fff;

						.picker-text {
							font-size: 28rpx;
							color: #333;
						}

						.picker-arrow {
							font-size: 24rpx;
							color: #999;
						}
					}

					.time-separator {
						margin: 0 20rpx;
						font-size: 28rpx;
						color: #666;
					}
				}
			}

			.search-buttons {
				display: flex;
				gap: 20rpx;

				.btn {
					height: 80rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					border: none;

					&.btn-primary {
						background: #409EFF;
						color: #fff;
					}

					&.btn-secondary {
						background: #f0f0f0;
						color: #666;
					}
				}
			}
		}
	}

	.list-scroll {
		flex: 1;
	}

	.list-container {
		padding: 20rpx;

		.record-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.license-info {
					.license-plate {
						display: block;
						font-size: 32rpx;
						font-weight: bold;
						color: #409EFF;
						margin-bottom: 5rpx;
					}

					.person-name {
						display: block;
						font-size: 24rpx;
						color: #666;
					}
				}

				.status-badge {
					padding: 8rpx 16rpx;
					border-radius: 12rpx;
					font-size: 24rpx;

					&.status-in {
						background: #67C23A;
						color: #fff;
					}

					&.status-out {
						background: #E6A23C;
						color: #fff;
					}
				}
			}

			.item-content {
				margin-bottom: 30rpx;

				.time-info,
				.record-time,
				.location-info,
				.remarks-info {
					display: flex;
					margin-bottom: 15rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						font-size: 28rpx;
						color: #666;
						min-width: 160rpx;
					}

					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.remarks-info {
					.value {
						background: #f8f9fa;
						padding: 15rpx;
						border-radius: 8rpx;
						white-space: normal;
						word-break: break-all;
					}
				}
			}

			.item-actions {
				display: flex;
				gap: 15rpx;

				.btn {
					flex: 1;
					height: 70rpx;
					border-radius: 8rpx;
					font-size: 26rpx;
					border: none;

					&.btn-info {
						background: #409EFF;
						color: #fff;
					}

					&.btn-warning {
						background: #E6A23C;
						color: #fff;
					}

					&.btn-danger {
						background: #F56C6C;
						color: #fff;
					}
				}
			}
		}

		.empty-state {
			text-align: center;
			padding: 120rpx 40rpx;

			.empty-text {
				font-size: 32rpx;
				color: #7c7c7c;
				font-weight: 500;
			}
		}
	}

	.quick-record {
		padding: 20rpx 30rpx;
		background: #fff;
		border-top: 1rpx solid #e4e7ed;

		.btn {
			width: 100%;
			height: 100rpx;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: bold;
			border: none;
			background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20rpx;

			&.btn-large {
				height: 100rpx;
			}

			.btn-icon {
				font-size: 40rpx;
			}

			.btn-text {
				font-size: 32rpx;
				font-weight: bold;
			}

			&:disabled {
				opacity: 0.6;
			}
		}
	}

	.quick-record-popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1000;
	}

	.quick-record-popup {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80vh;

		.popup-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #e4e7ed;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.close-btn {
				font-size: 36rpx;
				color: #999;
			}
		}

		.popup-content {
			padding: 30rpx;

			// 安全告知步骤样式
			.safety-instruction-step {
				.step-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.step-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.step-indicator {
						font-size: 24rpx;
						color: #666;
						background: #f5f5f5;
						padding: 6rpx 12rpx;
						border-radius: 12rpx;
					}
				}

				.safety-content {
					.safety-notice {
						background: #fff7e6;
						border: 2rpx solid #ffd666;
						border-radius: 12rpx;
						padding: 20rpx;
						margin-bottom: 30rpx;

						.safety-text {
							font-size: 28rpx;
							color: #d46b08;
							line-height: 1.5;
						}
					}

					.audio-player {
						background: #f8f9fa;
						border-radius: 12rpx;
						padding: 20rpx;
						margin-bottom: 30rpx;

						.audio-controls {
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;
							cursor: pointer;

							.play-btn {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								background: #409EFF;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 20rpx;
								transition: all 0.3s;

								&.playing {
									background: #67C23A;
								}

								.play-icon {
									font-size: 32rpx;
								}
							}

							.audio-info {
								flex: 1;

								.audio-title {
									display: block;
									font-size: 28rpx;
									font-weight: 500;
									color: #333;
									margin-bottom: 5rpx;
								}

								.audio-duration {
									display: block;
									font-size: 24rpx;
									color: #666;
								}
							}
						}

						.progress-bar {
							height: 6rpx;
							background: #e4e7ed;
							border-radius: 3rpx;
							overflow: hidden;

							.progress-fill {
								height: 100%;
								background: #409EFF;
								border-radius: 3rpx;
								transition: width 0.3s;
							}
						}
					}

					.next-step-btn {
						.btn {
							width: 100%;
							height: 80rpx;
							border-radius: 12rpx;
							font-size: 28rpx;
							font-weight: bold;
							border: none;
							transition: all 0.3s;

							&.btn-primary {
								background: #409EFF;
								color: #fff;

								&:disabled {
									background: #c0c4cc;
									color: #909399;
								}
							}
						}
					}
				}
			}

			// 登记步骤样式
			.registration-step {
				.step-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.step-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.step-indicator {
						font-size: 24rpx;
						color: #666;
						background: #f5f5f5;
						padding: 6rpx 12rpx;
						border-radius: 12rpx;
					}
				}
			}

			.form-item {
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					display: block;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 15rpx;
					font-weight: 500;
				}

				.input {
					width: 100%;
					height: 80rpx;
					border: 2rpx solid #e4e7ed;
					border-radius: 8rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					background: #fff;
					box-sizing: border-box;
				}

				.textarea {
					width: 100%;
					min-height: 120rpx;
					border: 2rpx solid #e4e7ed;
					border-radius: 8rpx;
					padding: 20rpx;
					font-size: 28rpx;
					background: #fff;
					box-sizing: border-box;
				}

				.radio-group {
					display: flex;
					gap: 40rpx;

					.radio-item {
						display: flex;
						align-items: center;

						.radio {
							width: 40rpx;
							height: 40rpx;
							border: 2rpx solid #e4e7ed;
							border-radius: 50%;
							margin-right: 15rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							&.checked {
								border-color: #409EFF;

								.radio-icon {
									color: #409EFF;
									font-size: 20rpx;
								}
							}
						}

						.radio-text {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
		}

		.popup-actions {
			display: flex;
			gap: 20rpx;
			padding: 30rpx;

			.btn {
				flex: 1;
				height: 80rpx;
				border-radius: 12rpx;
				font-size: 32rpx;
				font-weight: bold;
				border: none;

				&.btn-secondary {
					background: #f0f0f0;
					color: #666;
				}

				&.btn-primary {
					background: #409EFF;
					color: #fff;
				}

				&:disabled {
					opacity: 0.6;
				}
			}
		}
	}

</style>

